<template>
  <div
    :style="{ top: (posY - 30) + 'px', left: posX + 'px' }"
    class="popStay-wrap popHD"
  >
    <i class="el-icon-error close"  @click="close" />
    <span class="title">
      <!-- <img v-show="remarks.WLevel === 1" class="icon" src="~@/assets/map/village/1.png" alt="">
      <img v-show="remarks.WLevel === 2" class="icon" src="~@/assets/map/village/2.png" alt="">
      <img v-show="remarks.WLevel === 3" class="icon" src="~@/assets/map/village/3.png" alt="">
      <img v-show="remarks.WLevel === 4" class="icon" src="~@/assets/map/village/4.png" alt=""> -->
      {{ remarks.Village || remarks.Ewcode }}</span>
    <!-- <img class="line" src="../../../assets/map/popHD/popHD-line.png" alt=""> -->
    <div class="pop-row">
      <span class="borfan"><span class="bor"></span></span>
      <span class="key">危险等级：</span>
      <span class="value">{{ legendTxt[(remarks.WLevel - 1)] }}</span>
      <!-- <span v-if="remarks.wLevel === 1" class="value">极危险</span>
      <span v-else-if="remarks.wLevel === 2" class="value">危险</span>
      <span v-else-if="remarks.wLevel === 3" class="value">警戒</span>
      <span v-else-if="remarks.wLevel === 4" class="value">关注</span> -->
    </div>
    <div class="pop-row">
      <span class="borfan"><span class="bor"></span></span>
      <span class="key">预警依据：</span>
      <span class="value">{{ getYjyjStr(remarks) }}</span>
    </div>
    <div class="pop-row">
      <span class="borfan"><span class="bor"></span></span>
      <span class="key">预警来源：</span>
      <span v-if="remarks.SType === '1'" class="value">雨情</span>
      <span v-if="remarks.SType === '2'" class="value">流量</span>
      <!-- <img v-show="remarks.WLevel === 1" class="icon" src="~@/assets/map/village/1.png" alt="">
      <img v-show="remarks.WLevel === 2" class="icon" src="~@/assets/map/village/2.png" alt="">
      <img v-show="remarks.WLevel === 3" class="icon" src="~@/assets/map/village/3.png" alt="">
      <img v-show="remarks.WLevel === 4" class="icon" src="~@/assets/map/village/4.png" alt=""> -->
    </div>
    <div class="pop-row">
      <span class="borfan"><span class="bor"></span></span>
      <span class="key">超预警指标时间：</span>
      <span class="value">{{ $moment(remarks.Ftm).format('YYYY-MM-DD HH:mm') }}</span>
    </div>
    <div class="pop-row">
      <span class="borfan"><span class="bor"></span></span>
      <span class="key">村庄人数：</span>
      <span class="value">{{ remarks.PNum }}</span>
    </div>
    <div class="pop-row">
      <span class="borfan"><span class="bor"></span></span>
      <span class="key">防汛责任人：</span>
      <span class="value nowarp" :title="getUserList(remarks.UserList)">{{ getUserList(remarks.UserList) }}</span>
    </div>
    <!-- <div class="pop-row">
      <span class="borfan"><span class="bor"></span></span>
      <span class="key">处置状态：</span>
      <span class="value">已处置/未处置</span>
    </div> -->
    <div class="bordv"></div>
    <!-- <img class="line" src="../../../assets/map/popHD/popHD-line2.png" alt=""> -->
    <div class="pop-row juncont">
      <div class="btn" @click="showDetail">
        <!-- 详细信息 -->
      </div>
      <!-- <div class="btn" @click="warnSet">
        预警处置
      </div> -->
    </div>
    <i class="el-icon-arrow-down arrow" />
  </div>
</template>
<script>
import pop from '../mixins/popPosStay'
export default {
    name: 'Pop',
    mixins: [pop],
    data() {
        return {
            legendTxt: ['极危险', '危险', '警戒', '关注']
        }
    },
    computed: {
        remarks: function() {
            return this.$store.getters.popStayParams.remarks
        }
    },
    mounted() {
        this.$nextTick(() => {

        })
    },
    methods: {
        getYjyjStr(data) {
            var str = ''
            console.log(data.Step);
            if (data.SType === '2') {
                str = `关联河段洪峰流量${data.WData}m³/s，超${this.legendTxt[data.WLevel - 1]}指标（预警阈值：${data.V}m³/s）`
            } else if (data.SType === '1') {
                str = `${data.Stnm || ''}（${data.Stcd}）${data.Step}小时降雨达到${data.WData}mm，超${this.legendTxt[data.WLevel - 1]}指标（预警阈值：${data.V}mm）`
            }
            return str
        },
        getUserList(data) {
            var str = ''
            if (data != null && data instanceof Array) {
                str = data.map(v => {
                    return `${v.Name}:${v.Phone}`
                }).join(',\n')
            }
            return str
        },
        showDetail() {
          
            const dlgParams = this.$store.getters.dlgParams
            dlgParams.name = 'WarningDigInfo'
            dlgParams.params = this.remarks
            dlgParams.params.rvcd = this.remarks.SCode
            dlgParams.params.perioD_END = this.$moment(this.remarks.Ftm).format('YYYY-MM-DD HH:mm:ss')
            dlgParams.params.Ntm = this.$moment(this.remarks.Ntm).format('YYYY-MM-DD HH:mm:ss')
            dlgParams.params.isJCYJ = this.remarks.eventName === 'JCYJ'
            dlgParams.params.Step = 60
            this.$store.dispatch('dlgParams', dlgParams)
            this.close()
        },
        warnSet() {
            const dlgParams = this.$store.getters.dlgParams
            dlgParams.name = 'SendMessageDig'
            // 2022-12-23，xn要求加参数，1 预报预警  2 监测预警
            this.remarks.type = this.remarks.eventName === 'JCYJ' ? 2 : 1
            dlgParams.params = [this.remarks]
            this.$store.dispatch('dlgParams', dlgParams)
            this.close()
        },
        close() {
            this.$store.dispatch('closePopStay')
        }
    }
}
</script>

<style lang="scss" scoped>
.popStay-wrap {
  position: absolute;
  z-index: 5;
  width: 360px;
  height: 310px;
  &.popHD{
    // background: url("../../../assets/map/popHD/popHD-frame.png");
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    background: rgba(0,46,131,0.5);
    border: 1px solid #00F0FF;
    border-radius: 10px;
    padding: 0px 10px 10px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .title{
      width:260px;
      height:36px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      padding-left:14px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 36px;
      align-self: flex-start;
      // background: linear-gradient(90deg, #00BAFF 0%, rgba(0,168,255,0.2) 50%);
      // border-radius: 10px 0px 0px 0px;
      background:url("~@/assets/imgNew/jianceyujingTan.png") no-repeat;
      background-size: 100% 100%;
    }
    .line{
      width: 90%;
    }
  }
}
.close{
  position: absolute;
  right: 10px;
  top: 10px;
  color:#00FFFF;
  font-size:20px;
  cursor: pointer;
}
.arrow{
  position: absolute;
  bottom: -16px;
  font-size: 24px;
  // color: #4141be;
  // color: #3d3dd3;
  color: #00FFFF;
}
.icon {
  width: 16px;
  height: 16px;
}
.pop-row {
  width: 100%;
  display: flex;
  // align-items: center;
  // justify-content: space-around;
  justify-content: flex-start;
  line-height: 16px;
  padding-left:23px;
  .key {
    font-size: 14px;
    font-family: Source Han Sans CN;
    line-height: 16px;
    white-space: nowrap;
    font-weight: 400;
    color: #D1E8ED;
  }
  .value {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 16px;
    // color: #DDE8F8;
    color:#fff;
  }
  .nowarp{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
 
  .btn{
    // background: url(../../../assets/map/popHD/btnPlay.png) no-repeat top center;
    // background-size: 100% 100%;
    // padding: 10px 20px 7px 20px;
    margin: 0 5px;
    letter-spacing: 2px;
    height: 36px;
    line-height: 36px;
    // border: 1px solid #00FFFF;
    // background: linear-gradient(0deg, #00F6FF 0%, rgba(0,246,255,0) 100%);
    // border-radius: 6px;
     background:url("~@/assets/imgNew/xiangxi.png") no-repeat;
     background-size: 100% 100%;
    width:100%;
    text-align: center;
    cursor: pointer;
    // &:hover{
    //   background: url(../../../assets/map/popHD/btnPlay_active.png) no-repeat top center;
    //   background-size: 100% 100%;
    // }
  }
}
 .juncont{
    justify-content: space-between;
    padding-left:14px;
    padding-right:4px;
  }
  .bordv{
    width: calc(100% - 10px);
    height: 1px;
    background: #3F72AA;
    margin-left:10px;
  }
  .borfan{
  display: inline-block;
  position: relative;
  left:-6px;
  top:3px;
  padding: 4px;
  height: 10px;
  border: 1px solid #00FFFF;
  box-sizing: border-box;
  .bor{
  position: absolute;
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #00FFFF;
  top:2px;
  left:2px;
  }
}
</style>
